<template>
	<div>
		<div class="nav-wrapper" ref="navWrapper">
			<ul class="sliding-nav">
				<li v-for="(room, index) in rooms" :key="room.id">
					<div @click="getDeviceByRoom(room.id)" class="room" :class="{ 'selected': selectedRoomId === room.id }">{{room.roomName}}</div>
				</li>
			</ul>
		</div>
		<div class="main">

			 <u-grid :row="3" :border="false">  
			    <u-grid-item v-for="(device, index) in devicelist" :key="index" class="uview-grid-item">  
			      <Device :deviceDescription="device.type"  :deviceImage="device.img"/>  
			    </u-grid-item>  
			  </u-grid>  
		</div>
	</div>
</template>

<script>
	import {
		listRoom
	} from '@/api/system/room.js'
	import {
		listAppliance
	} from '@/api/system/appliance.js'
	import {
		listType
	} from "@/api/system/device.js"
	import Device from '@/pages/common/device/device.vue'
	export default {

		data() {
			return {
				rooms: [
					{
						id: 1,
						roomName: "测试",
					},
					{
						id: 2,
						roomName: "测试",
					},
					],
				selectedRoomId: null ,
				loading: false,
				queryParams: {
					pageNum: 1,
					pageSize: this.$store.state.maxDeviceNumber,
					roomName: null,
				},
				devicelist: [
					{
						type: "灯",
						img: "light2.png",
					},
					{
						type: "插排",
						img: "socket.png",
					},
					{
						type: "窗帘",
						img: "curtain.png",
					},
					{
						type: "音响",
						img: "sound.png",
					},
					{
						type: "空调",
						img: "aircondition.png",
					},
					{
						type: "电视机",
						img: "television1.png",
					},
					{
						type: "灯",
						img: "light2.png",
					},
					{
						type: "插排",
						img: "socket.png",
					},
					{
						type: "窗帘",
						img: "curtain.png",
					},
		],
				typeList: [],
			};
		},
		components: {
			Device
		},
		created() {
			this.getRoomList();

		},
		methods: {
			getTypeList(id) {
				this.loading = true;
				listType(id).then(response => {
					this.typeList = response.rows;
					// this.total = response.total;
					this.loading = false;
					console.log(this.typeList);
				});
			},
			getRoomList() {
				this.loading = true;
				listRoom(this.queryParams).then(response => {
					this.rooms = response.rows;
					console.log(response.rows);
					console.log(this.rooms);
					this.loading = false;
				});

			},
			getDeviceByRoom(id) {
				console.log(id);
				listAppliance(id).then(response => {
					this.devicelist = response.rows;
					console.log(response.rows);
					console.log(this.rooms);
				});
				this.selectedRoomId=id;
				
			},
		},
	}
</script>

<style lang="scss">
	.mian{
			background-color: #f9f9f9;
	}
	.nav-wrapper {
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		margin-top: 50rpx;
	}

	.sliding-nav {

		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
	}

	.sliding-nav li {
		flex: 0 0 auto;

	}

	.sliding-nav li div {
		display: inline-block;
		padding: 0rpx 20rpx;
		text-decoration: none;
		border: transparent;
		background-color: transparent;
	}

	.uview-grid-item {
		// display: flex;
	}
	.room{
		font-size: 40rpx;
		font-weight: bold;
		color: rgba(175, 175, 175, 1);
	}
	.selected{
		font-size: 44rpx;
		color: rgba(0, 0, 0, 1);
	}
</style>